<template>
  <div style="border: 1px solid; padding: 10px;">
    <h4>base api</h4>
    <h5 ref="ele">ref, reactive, computed, watch, life-cycle</h5>
    <div>{{ num }}</div>
    <button @click="addNum('blue')">num++</button>
    <button @click="getElement('red')">get element</button>
    <hr>
    <div>{{ fullName }}</div>
    <h4>child</h4>
    <baseApiChild :user="user" @change="changeFn" />
  </div>
</template>

<script setup>
import {computed, reactive, ref, watch, watchEffect} from 'vue'
import baseApiChild from './baseApiChild.vue'
const num = ref(0)

const addNum = () => {
  num.value ++
}

const ele = ref()
const getElement = () => {
  console.log(ele.value)
}

const firstName = ref('daogelas')
const lastName = ref('fugui')

const fullName = computed(() => {
  return firstName.value + '·' + lastName.value
})

// 默认深度监听
watch([num, firstName], (newVal, oldVal) => {
  console.log('watch监听：', newVal)
}, {
  immediate: true,
  deep: true
})
// 默认自动执行，
// 自动收集依赖（回调函数里用到的 - num）
const stopWatch =watchEffect(() => {
  console.log('num', num.value)
  if (num.value > 10) {
    stopWatch()
  }
})

const user = reactive({
  name: 'daogelas',
  age: 100,
  addr: '格陵兰🇬🇱'
})

const changeFn = (age) => {
  console.log(age)
  user.age = age
}
</script>

<style scoped>
</style>
